Fix output width: no horizontal scroll, use full column width, shorter nav - #9
Merged
Merged
Conversation
The font is fitted from a measured 200-char glyph run so exactly MinColumns (78) columns span the content box. But the min-width track that holds those columns used the CSS `ch` unit (`calc(var(--sc-cols) * 1ch)`), whose single- glyph advance rounds ~2px wider than the averaged run. So `78ch` exceeded the box by a couple px and .sc-output-area's overflow-x:auto showed a permanent tiny horizontal scrollbar — you had to center the scroll to see all 78, and long lines scrolled instead of wrapping at the column edge. measureGrid now publishes the track width in pixels (--sc-cols-width), measured from a real run of `cols` glyphs at the fitted size — the same basis the font was fitted to. .sc-output min-width uses that px value instead of 1ch. In the fitting case the track stays inside the box (no scroll; lines wrap at column 78); it only exceeds the box and scrolls when the screen genuinely can't fit the columns at the minimum font, which is the intended fallback. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01HHCRc5CJ6595iMzEgYYdQp
HarryCordewener
changed the title
HarryCordewener
changed the title
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Symptom
Output fits 78 columns but there's a left/right scrollbar; you have to center the scroll to see all 78, instead of long lines wrapping.
Root cause (corrected)
My first attempt swapped the
min-widthtrack from1chto a measured px value on a "1chrounds ~2px wider" theory. That was wrong — verified in Chrome that for JetBrains Mono78ch(378.786px) and the measured 78-glyph run (378.789px) are sub-pixel identical. The track was never meaningfully too wide.The scroll came from the page allowing it (as @user pointed out):
.sc-outputhad a forcedmin-widthcolumn track, and.sc-output-areahadoverflow-x: auto.So any excess width — sub-pixel, or Android WebView font-boosting inflating text beyond the size
measureGridfitted the grid to — turned into a horizontal scrollbar.Fix (wrap, never scroll sideways)
min-widthtrack from.sc-output— nothing forces the block wider than its box; lines wrap at the fitted column width..sc-output-areaoverflow-x: auto→hidden— the page can't scroll horizontally; residual excess is clipped, not scrolled.text-size-adjust: 100%on html/body — stops the Android WebView auto-inflating text (the device-only reason real lines exceeded the fitted grid)..sc-linkbuttons wrap (white-space: normal; overflow-wrap: anywhere) so a long command link can't be the one element that refuses to wrap.--sc-cols-widthJS from the first commit.Verification
Reproduced the layout in a standalone harness and inspected in Chrome at 360 / 393 / 412px widths with a long link button and simulated font-boosting: no horizontal scrollbar; content wraps. CSS/JS only; no C# changes; Web builds clean.
🤖 Generated with Claude Code